<script lang='ts' setup>
import { computed, ref } from "vue"

const price = ref(100)
const num3 = ref(1)
const total = computed(() => {
    return price.value * num3.value
})
const value = ref<string>('1');

const open = ref<boolean>(false);


const handleOk = (e: MouseEvent) => {
    console.log(e);
    open.value = false;
};
</script>
<template>
    <div class="h-full bg-gray-100 p-5">
        <div class="flex justify-center items-center pt-5 relative z-2">
            <div class="w-400 shadow-inner rounded bg-white p-5">
                <p class="border-b-2 pb-2 text-2xl pl-5 mt-10">
                    软件名称
                </p>

                <a-alert message="注意：" description="因本产品是卡密, 一旦激活将无法退回, 拍前请认真阅读《软件服务协议》 、《法律声明》!" type="warning"
                    show-icon />

                <div class="pl-10">
                    <div class="mt-5">
                        <div>
                            单价：
                            <span class="text-red-600">
                                {{ price }}元
                            </span>
                        </div>

                        <div class="my-5">
                            <span>
                                商品数量：
                            </span>
                            <el-input-number v-model="num3" size="small" :max="100" :min="1" />
                        </div>

                    </div>

                    <!-- <img src="/common/pay.svg" alt="" class="absolute right-5 top-0"> -->

                    <p class="mt-5">
                        <span>
                            合计：
                        </span>
                        <span class="text-red-600">
                            {{ total }} 元
                        </span>
                    </p>
                    <div class="mt-5">
                        支付方式：
                    </div>

                    <div class="flex pl-10 pt-5">
                        <a-radio-group v-model:value="value" name="radioGroup">
                            <a-radio value="1">
                                <img src="/console/ali.png" alt="" class="h-20 hidden md:block">
                                <span class="md:hidden">
                                    支付宝
                                </span>
                            </a-radio>
                            <a-radio value="2" class="ml-10">
                                <img src="/console/wx.png" alt="" class="h-20 md:block hidden">
                                <span class="md:hidden">
                                    微信
                                </span>
                            </a-radio>
                        </a-radio-group>
                    </div>

                    <div class="flex justify-end pt-5">
                        <a-button type="primary" @click="open = true">
                            去支付
                        </a-button>
                    </div>

                </div>
            </div>
        </div>


        <a-modal v-model:open="open" title="扫码支付" @ok="handleOk">
            <div class="flex justify-center flex-col items-center">
                <img src="/console/qr.png" alt="" class="h-50">
                <p>
                    请在5分钟内扫码支付
                </p>
            </div>
        </a-modal>
    </div>
</template>
<style lang='scss' scoped>
.payBg {
    background: url(/common/pay.svg);
}
</style>